<template>
  <div>
    <!-- 搜索框 -->
    <van-search
        v-model="value"
        show-action
        shape="round"
        background="gray"
        placeholder="请输入搜索关键词"
        @search="onSearch">
      <template #action>
        <div @click="onSearch()">搜索</div>
      </template>
      <template #left>
        <van-icon name="arrow-left" @click="goBack()"/>
      </template>
    </van-search>

    <div v-infinite-scroll="loadMore"
         infinite-scroll-distance="2"
         style="padding: 0 0 8vh 0">
      <div v-if="active==='note'">
        <van-pull-refresh v-model="notePage.refresh" @refresh="onRefreshNote()">
          <note :note="notePage.noteList"/>
        </van-pull-refresh>
      </div>

      <div v-else>
        <van-pull-refresh v-model="userPage.refresh" @refresh="onRefreshUser()">
          <user :user="userPage.userList" :is-chart="false" :is-follow="true"></user>
        </van-pull-refresh>
      </div>
    </div>


    <van-tabbar v-model="active">
      <van-tabbar-item name="note" icon="orders-o" @click="changeTab">笔记</van-tabbar-item>
      <van-tabbar-item name="user" icon="user-o" @click="changeTab">用户</van-tabbar-item>
    </van-tabbar>


  </div>
</template>

<script>
import {Toast} from "vant";
import Note from "../components/Note";
import User from "../components/User";
import merge from 'webpack-merge';

export default {
  components: {Note, User},
  data() {
    return {
      value: "",
      active: "",
      notePage: {
        noteList: [
          {
            id: "",
            img: "",
            isLiked: false,
            likeNum: 0,
            title: "",
            userId: "",
            userImg: "",
            userName: "",
          },
        ],
        current: 1,
        pages: 0,
        refresh: true,
      },
      userPage: {
        userList: [{
          name: "",
          id: "",
          account: "",
          img: "",
          isFollowed: false,
        }],
        current: 1,
        pages: 0,
        refresh: true,
      },
    };
  },
  mounted() {
    this.value = this.$route.query.name;
    this.active = this.$route.query.active;
    this.onSearch();
  },
  methods: {
    changeTab() {
      this.$router.push({
        query: merge(this.$route.query, {active: this.active})
      });
      this.onSearch();
    },
    goBack() {
      this.$router.push("/search");
    },
    onSearch() {
      if (this.active === "note") {
        this.notePage.noteList = [];
        this.notePage.current = 1;
        this.searchNote(this.value, this.notePage.current);
        this.notePage.current++;
      } else {
        this.userPage.userList = [];
        this.userPage.current = 1;
        this.searchUser(this.value, this.userPage.current);
        this.userPage.current++;
      }
    },
    loadMore() {
      if (this.active === "note") {
        this.loadMoreNote();
      } else {
        this.loadMoreUser();
      }
    }
    ,


    loadMoreNote() {
      if (this.notePage.current <= this.notePage.pages) {
        this.searchNote(this.value, this.notePage.current);
        this.notePage.current++;
      }
    }
    ,
    onRefreshNote() {
      setTimeout(() => {
        Toast("刷新成功");
        this.notePage.refresh = false;
        this.onSearch();
      }, 1000);
    }
    ,
    searchNote(title, current) {
      let url = "/api/mfh/note/page";
      this.http
          .post(url, {
            currentPage: current,
            pageSize: 10,
            title: title,
          })
          .then((res) => {
            // 请求到数据存放到本地
            this.notePage.pages = res.data.data.pages;
            for (let i in res.data.data.records) {
              this.notePage.noteList.push({
                id: res.data.data.records[i].id,
                img: res.data.data.records[i].imgs
                    ? res.data.data.records[i].imgs[0]
                    : "",
                isLiked: res.data.data.records[i].isLiked,
                likeNum: res.data.data.records[i].likeNum,
                title: res.data.data.records[i].title,
                userId: res.data.data.records[i].userId,
                userImg: res.data.data.records[i].userImg,
                userName: res.data.data.records[i].userName,
              });
            }
          });
    }
    ,

    loadMoreUser() {
      if (this.userPage.current <= this.userPage.pages) {
        this.searchUser(this.value, this.userPage.current);
        this.userPage.current++;
      }
    }
    ,
    onRefreshUser() {
      setTimeout(() => {
        Toast("刷新成功");
        this.userPage.refresh = false;
        this.onSearch();
      }, 1000);
    }
    ,
// 点击用户按钮去触发请求用户查询接口
    searchUser(name, current) {
      let url = "/api/mfh/user/page";
      this.http
          .post(url, {
            currentPage: current,
            name: name,
            pageSize: 10,
          })
          .then((res) => {
            // 请求到数据存放到本地
            this.userPage.pages = res.data.data.pages;
            for (let i in res.data.data.records) {
              this.userPage.userList.push({
                id: res.data.data.records[i].id,
                name: res.data.data.records[i].name,
                account: res.data.data.records[i].account,
                isFollowed: res.data.data.records[i].isFollowed,
                img: res.data.data.records[i].profileImg ? res.data.data.records[i].profileImg : "404.jpg"
              })
            }
          });
    }
    ,

  },
}
;
</script>

<style scoped>

</style>